@use '../abstracts/variables' as *;

.header {
    height:95vh;
    background-image: 
        linear-gradient(to right bottom,rgba($color-primary-light, 0.8),rgba($color-primary-dark, 0.8)),
        url(../img/hero.jpg);  /*两个背景叠加的效果*/
    background-size: cover;
    background-position: top;
    clip-path: polygon(0 0,100% 0,100% 75vh,0 100%);  /*裁剪路径 除了比例还可以写具体的长度：500px*/
    position: relative;

    &__logo-box {
        position: absolute;
        top: 4rem;
        left: 4rem;  
    }
    &__logo {
        height: 3.5rem;
    }

    &__text-box {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

}